<template>
  <div class="my-reservation"
      v-loading="loading.status"
      :element-loading-text="loading.txt"
  >
    <div class="my-reservation-operation clear">
      <div class="my-reservation-operation-l fl">
        <el-button type="primary" @click="sortingData()">时间
          <i :class="[ sortFlag ? 'el-icon-sort-up sortGery' : 'el-icon-sort-up' ]"></i>
          <i :class="[ sortFlag ? 'el-icon-sort-down' : 'el-icon-sort-down sortGery' ]"></i>
        </el-button>
        <el-input placeholder="请输入公开课名称"  v-model="keyword" @keyup.enter.native="searchFunc">
        </el-input>
        <el-button type="primary" size="big" @click="searchFunc">搜索</el-button>
      </div>
      <router-link to="/course2/add" class="fr">新建预约</router-link>
    </div>
    <div class="my-reservation-wp">
      <ul class="clear">
        <li class="my-reservation-list fl" v-for="(item, index) in listData" :key="index">
          <div class="my-reservation-list-h clear">
            <router-link :to="{path: '/course2/edit', query: {id: item.id}}" :title="item.name">{{item.name}}</router-link>
            <el-tag type="warning" v-if="item.live_status===1">未开始</el-tag>
            <el-tag type="primary" v-else-if="item.live_status===2">进行中</el-tag>
            <el-tag type="info" v-else-if="item.live_status===3">已结束</el-tag>
            <el-tag type="info" v-else-if="item.live_status===4">已过期</el-tag>
            <span class="fr r-check " v-if="item.status===1">
              <i class="el-icon-circle-check">通过</i>
            </span>
            <span class="fr r-remove" v-else-if="item.status===2">
              <i class="el-icon-remove"></i>
              未审核
              <el-button type="primary" class="revoke_btn fr" v-if="1" @click="revoke(item.id)">撤销</el-button>
            </span>
            <span class="fr r-close" v-else-if="item.status===3">
              <i class="el-icon-circle-close"></i>
              拒绝
            </span>
            <span class="fr r-warning" v-else-if="item.status===4">
              <i class="el-icon-warning"></i>
              已撤销
            </span>
          </div>
          <ul>
            <li class="my-reservation-list-txt clear">
              <span>地点：</span>
              <div>
                <span>{{item.school_name}}</span>
              </div>
            </li>
            <li class="my-reservation-list-txt clear">
              <span>直播时间：</span>
              <div>
                <span>{{item.start_time}}</span>
              </div>
            </li>
            <li class="my-reservation-list-txt clear">
              <span>评级：</span>
              <div>
                <span>{{item.level}}</span>
                <router-link :to="{path: '/course2/video', query: {id: item.id,name: item.name}}" v-if="item.level==='A'">回看</router-link>
              </div>
            </li>
            <li class="my-reservation-list-txt clear">
              <span>评教学反思：</span>
              <div v-if="item.live_status===3&&item.is_input_feedback===0">
                <span>待录入</span>
                <router-link :to="{path: '/course2/reflect-add', query: {id:item.id,name:item.name}}">录入</router-link>
              </div>
              <div v-else-if="item.live_status===3&&item.is_input_feedback===1">
                <span>已录入</span>
                <router-link :to="{path: '/course2/reflect-edit', query: {id:item.feedback_id,name:item.name}}">查看</router-link>
              </div>
            </li>
            <li class="my-reservation-list-txt clear">
              <span>课前资料：</span>
              <div v-if="item.live_status==1&&item.status===1&&item.is_upload_file===0">
                <span>未上传</span>
                <router-link :to="{path: '/course2/entry', query: { id:item.id,name:item.name}}">上传</router-link>
              </div>
              <div v-else-if="item.status===1&&item.is_upload_file===1">
                <span>已上传</span>
                <router-link :to="{path: '/course2/entry', query: { id:item.id,name:item.name}}">查看</router-link>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <el-pagination v-if="data_sum>12" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[12, 24, 36, 48, 60, 72]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="data_sum">
    </el-pagination>
    <div class="dependent" v-if="placeholder">
      <i class="ipng image_state01"></i>
      <p>还没发现任何相关的内容哦~</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:{
          status:false,
          txt:'获取数据...',
      },
      placeholder: false,
      sortFlag: true,
      page_index: 1,
      page_size: 12,
      data_sum: 0,
      keyword: "",
      order: 2,
      listData: [],
      listParam: {
        keyword: "",
        order: 2,
        page_index: 1,
        page_size: 12
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    sortingData() {
      this.sortFlag = !this.sortFlag;
      if (this.sortFlag == true) {
        this.listParam.order = 2;
      } else if (this.sortFlag == false) {
        this.listParam.order = 1;
      }
      this.getList();
    },
    searchFunc() {
      this.listParam.keyword = this.keyword;
      this.getList();
    },
    getList() {
      this.loading.status = true;
      let success = data => {
        this.loading.status = false;
        this.listData = data.data.data;
        this.data_sum = data.data.data_sum;
        this.listData.length === 0
          ? (this.placeholder = true)
          : (this.placeholder = false);
      };
      let fail = data => {
           this.loading.status = false;
           this.$message.error( data.msg )
      }
      this.$ajax.get("api/teachingschedule/my_schedule_list", {
        params: this.listParam,
        func: { success: success,fail:fail }
      });
    },
    //分页
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    },
    revoke(val) {
      this.$confirm("确定进行此操作吗？", "撤销", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "confirm-them"
      })
        .then(() => {
          //   this.dataTable = false;
          //   this.$message({
          //     type: "success",
          //     message: "删除成功!"
          //   });
          let success = res => {
            this.$message.success(res.msg);
            this.getList();
          };
          this.$ajax({
            url: "api/teachingschedule/teaching_schedule_cancel",
            method: "put",
            params: {
              schedule_id: val
            },
            func: {
              success: success
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss">
.revoke_btn {
    width: 46px !important;
    height: 21px !important;
    line-height: 21px !important;
}
.my-reservation-operation {
  .my-reservation-operation-l {
    .el-input {
      width: 200px;
      border: 1px solid #ddd;
      margin-left: 15px;
      .el-input__inner {
        background-color: #fff;
      }
    }
  }
  .sortGery {
    color: #606266;
  }
}
</style>